import { Form, Input, Toast, Button } from 'esy-ui';
import { Header } from '@/components';
import { form_ipt_com_1 } from '@/styles/esy-ui';
import { useFormatText } from '@/hooks';
import { useGlobalStore } from '@/mobx';
import { postUpdateLoginPwd } from '@/services';
import PasswordIcon from '@/components/icon/Password';

const FormItem = Form.Item;

/** 登录密码修改 */
const editPwd = {
  title: 'text_126',
  formItmes: [
    {
      name: 'OldPassword',
      label: 'text_123',
      type: 'password',
      placeholder: 'text_211',
    },
    {
      name: 'NewPassword',
      label: 'text_124',
      type: 'password',
      placeholder: 'text_212',
    },
    {
      name: 'ConfirmPassword',
      label: 'text_125',
      type: 'password',
      placeholder: 'text_213',
    },
  ],
};

function UpdatePwd() {
  const [form] = Form.useForm();
  const { text } = useFormatText();
  const { changeState } = useGlobalStore();

  const onSubmit = () => {
    changeState('isLoading', true);
    form
      .validate()
      .then((values) => {
        if (Object.values(values).some((it) => !it)) {
          Toast.show({ content: text('text_88') });
          changeState('isLoading', false);
        } else {
          postUpdateLoginPwd(values)
            .then(() => {
              Toast.show({ content: text('text_129') });
            })
            .catch(() => {})
            .finally(() => {
              changeState('isLoading', false);
            });
        }
      })
      .catch(() => {
        changeState('isLoading', false);
      });
  };

  return (
    <div className='bg-white w-full h-full flex flex-col'>
      <Header title={editPwd.title} />
      <Form form={form} className='px-2.5 py-10'>
        {/* <div className='flex-1'> */}
        {editPwd.formItmes.map((it) => (
          <FormItem className='mb-5' key={it.name} name={it.name}>
            <Input placeholder={text(it.placeholder)} type='password' classNames={form_ipt_com_1} maxLength={12} prefix={<PasswordIcon className='absolute left-3' />} />
          </FormItem>
        ))}
        {/* </div> */}
        <Button className='rounded mt-3' htmltype='submit' onClick={onSubmit}>
          {text('text_93')}
        </Button>
      </Form>
    </div>
  );
}

export default UpdatePwd;
